<template>
  <div style="background-color:#F7F7F7;height: 100%">
    <header class="header">
      <!--            <van-nav-bar title="商品列表" left-text="返回" left-arrow/>-->
      <div class="search-bar">
        <i class="iconfont icon-back_light my-icon" @click="goBack"></i>

        <div class="search-div">
          <input type="text" />
          <div class="search-icon">
            <i class="iconfont icon-search"></i>
          </div>
        </div>
        <i
          class="iconfont my-icon"
          :class="listType==='list'?`icon-list`:`icon-apps`"
          @click="switchListType"
        ></i>
      </div>
      <ul class="tool-bar">
        <li>默认</li>
        <li>销量</li>
        <li>
          价格
          <div class="sort" @click="toggleSortOrder">
            <i class="iconfont icon-fold" :class="{sortActive:sortOrder===`asc`}"></i>
            <i class="iconfont icon-unfold" :class="{sortActive:sortOrder===`desc`}"></i>
          </div>
        </li>
        <li @click="rightFilterShow">
          筛选
          <i class="iconfont icon-filter" style="color:#898989;margin-left:.2rem"></i>
        </li>
      </ul>
    </header>

    <div class="goods-list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <ul v-if="listType==='list'" class="">
            <li v-for="(item,key) in goodsList" :key="key" class="goods-box">
              <img :src="item.url" alt />
              <div class="goods-box-right">
                <div>{{item.title}}</div>
                <div style="margin-top:.2rem">
                  <b style="font-size: .8rem;color: #ff0036">¥ {{item.amount}}</b>
                  <span style="color: #898989;margin-left: .4rem">{{item.payNum}}人付款</span>
                </div>
                <div style="color: #898989;font-size: .6rem;margin-top:.2rem">免运费</div>
              </div>
            </li>
          </ul>

          <ul v-if="listType==='box'" style="display:flex;flex-wrap:wrap">
            <li v-for="(item,key) in goodsList" :key="key" style="width:50%;padding:.4rem;box-sizing:border-box;background-color:white;font-size:.7rem">
              <img :src="item.url" alt style="width:100%;display:block;" />
              <div>{{item.title}}</div>
              <div style="margin-top:.2rem">
                <b style="font-size: .8rem;color: #ff0036">¥ {{item.amount}}</b>
                <span style="color: #898989;margin-left: .4rem">{{item.payNum}}人付款</span>
              </div>
              <div style="color: #898989;font-size: .6rem;margin-top:.2rem">免运费</div>
            </li>
          </ul>
        </van-list>
      </van-pull-refresh>
    </div>

    <van-popup
      v-model="rightFilterVisible"
      :round="true"
      position="right"
      style="width:68%;height:100%;"
    >
      <right-filter />
    </van-popup>
  </div>
</template>
<script>
import { Popup, PullRefresh, List } from "vant";

import RightFilter from "./right_filter";

export default {
  components: {
    // "van-nav-bar": NavBar,
    "van-popup": Popup,

    "right-filter": RightFilter,
    "van-pull-refresh": PullRefresh,
    "van-list": List
    // "van-cell": Cell
  },
  data() {
    return {
      rightFilterVisible: false,
      listType: "list", // list|box
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      sortOrder: "",
      goodsList: [
        {
          url: `https://uniapp.b2b2c.niuteam.cn//upload/9/common/images/20200420/20200420104549158735074918885_mid.jpg`,
          title: "怒推进店闭眼入口碑款挚爱宽松休闲洋气高品质显肤奶油绿王炸卫衣",
          desc: ``,
          amount: "200.20",
          payNum: 2
        },
        {
          url: `https://uniapp.b2b2c.niuteam.cn//upload/4/common/images/20200417/20200417111915158709355567234_mid.jpg`,
          title: "芝华仕钢化玻璃长方形餐桌椅家用美式现代简约家具组合 PT002",
          desc: `现代简约百搭钢化玻璃实木腿`,
          amount: "3999.20",
          payNum: 0
        },
        {
          url: `https://uniapp.b2b2c.niuteam.cn//upload/9/common/images/20200420/20200420103609158735016910945_mid.jpg`,
          title: "连衣裙2020春夏新款法国设计感小众气质舒适中长款",
          desc: `一件不一样的长裙会带来不一样的感受，用心照顾每一位顾客`,
          amount: "399.00",
          payNum: 2
        },
        {
          url: `https://uniapp.b2b2c.niuteam.cn//upload/4/common/images/20200417/20200417111915158709355567234_mid.jpg`,
          title: "芝华仕钢化玻璃长方形餐桌椅家用美式现代简约家具组合 PT002",
          desc: `现代简约百搭钢化玻璃实木腿`,
          amount: "3999.20",
          payNum: 0
        },
        {
          url: `https://uniapp.b2b2c.niuteam.cn//upload/4/common/images/20200417/20200417111915158709355567234_mid.jpg`,
          title: "芝华仕钢化玻璃长方形餐桌椅家用美式现代简约家具组合 PT002",
          desc: `现代简约百搭钢化玻璃实木腿`,
          amount: "3999.20",
          payNum: 0
        },
        {
          url: `https://uniapp.b2b2c.niuteam.cn//upload/9/common/images/20200420/20200420103609158735016910945_mid.jpg`,
          title: "连衣裙2020春夏新款法国设计感小众气质舒适中长款",
          desc: `一件不一样的长裙会带来不一样的感受，用心照顾每一位顾客`,
          amount: "399.00",
          payNum: 2
        },
        {
          url: `https://uniapp.b2b2c.niuteam.cn//upload/9/common/images/20200420/20200420104549158735074918885_mid.jpg`,
          title: "怒推进店闭眼入口碑款挚爱宽松休闲洋气高品质显肤奶油绿王炸卫衣",
          desc: ``,
          amount: "200.20",
          payNum: 2
        }
      ]
    };
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    rightFilterShow() {
      this.rightFilterVisible = true;
    },
    toggleSortOrder() {
      if (this.sortOrder === "asc") {
        this.sortOrder = "desc";
      } else {
        this.sortOrder = "asc";
      }
    },
    switchListType() {
      if (this.listType === "list") {
        this.listType = "box";
      } else {
        this.listType = "list";
      }
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    }
  }
};
</script>
<style lang="less">
.header {
  background-color: white;
}

.search-bar {
  margin-top: 0.4rem;
  padding: 0 0.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .my-icon {
    font-size: 1.2rem;
    color: #898989;
  }

  .search-div {
    margin: 0 0.4rem;
    background-color: #f8f8f8;
    border-radius: 1rem;
    flex: 1;
    padding: 0.3rem 0.8rem;
    text-align: center;
    display: flex;

    input {
      background-color: #f8f8f8;
      flex: 1;
      border: none;
      height: 1.2rem;
      padding: 0;
      display: block;
      font-weight: normal;
      font-size: 0.7rem;
    }

    .search-icon {
      text-align: center;
      width: 1.4rem;
      color: #898989;
    }
  }
}

.sort {
  margin-left: 0.2rem;
  display: flex;
  flex-direction: column;
  height: 100%;

  .sortActive {
    color: red;
  }

  i {
    font-size: 0.7rem;
    display: block;
    height: 0.3rem;
    color: #898989;
  }
}

.tool-bar {
  display: flex;
  padding: 0.5rem 0.2rem;
  border-bottom: 1px solid #e7e7e7;
  margin-bottom: 0.4rem;

  li {
    display: flex;
    flex: 1;
    font-size: 0.7rem;
    text-align: center;
    justify-content: center;
    align-items: center;
  }
}

.goods-list {
  box-sizing: border-box;
  overflow-y: scroll;
  padding: 0.2rem 0.5rem;
  height: calc(100% - 3.8rem);

  .list-type{}
  .box-type{
    
  }

  .goods-box {
    height: 6rem;
    background-color: white;
    border-radius: 0.6rem;
    display: flex;
    font-size: 0.7rem;
    margin-bottom: 0.4rem;
    padding: 0.4rem;

    img {
      border-radius: 0.75rem;
      height: 100%;
    }

    .goods-box-right {
      margin-left: 0.4rem;
    }
  }
}
</style>
